
<!-- 内容标题（页面标题） -->
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>个人中心</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="javascript:void(0)">主页</a></li>
          <li class="breadcrumb-item active">用户资料</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</section>

<!-- 主体内容 -->
<section class="content" id="userContent">

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <!-- Profile Image -->

        <!-- 小部件：用户小部件样式 1 -->
        <div class="card card-widget widget-user">
          <!-- 将 bg-* 类添加到标题中 -->
          <div class="widget-user-header bg-gradient-blue">
            <h3 class="widget-user-username">{{userInfo.nickname}}</h3>
            <h5 class="widget-user-desc">（id：{{userInfo.userId}}</h5>
          </div>
          <div class="widget-user-image">
            <img class="img-circle elevation-2" :src="userInfo.avatar" alt="用户头像">
          </div>

          <div class="card-footer">
            <div class="row">
              <div class="col-sm-3 border-right">
                <div class="description-block">
                  <h5 class="description-header">{{userInfo.be_collected}}</h5>
                  <span class="description-text">被收藏</span>
                </div>
                <!-- /.description-block -->
              </div>
              <div class="col-sm-3 border-right">
                <div class="description-block">
                  <h5 class="description-header">{{userInfo.scores}}</h5>
                  <span class="description-text">积分</span>
                </div>
                <!-- /.description-block -->
              </div>
              <!-- /.col -->
              <div class="col-sm-3 border-right">
                <div class="description-block">
                  <h5 class="description-header">{{userInfo.label_num}}</h5>
                  <span class="description-text">书签</span>
                </div>
                <!-- /.description-block -->
              </div>
              <!-- /.col -->
              <div class="col-sm-3">
                <b>使用情况</b> <a class="float-right">{{userInfo.storage_use}}/{{userInfo.storage_max}}</a>
                <div class="progress progress-sm active">
                  <div class="progress-bar bg-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div>
                </div>
                <a href="javascript:void(0)" class="float-right">扩容</a>
                <!-- /.description-block -->
              </div>
              <!-- /.col -->
            </div>
            <!-- /.row -->
          </div>
        </div>

      </div>
      <!-- /.col -->
      <div class="col-md-12">
        <div class="card card-info">
          <div class="card-header p-2">
            <ul class="nav nav-pills">
              <li class="nav-item"><a class="nav-link active" href="#userInfo" data-toggle="tab">个人信息</a></li>
              <li class="nav-item"><a class="nav-link" href="#userMarks" data-toggle="tab">我的书签</a></li>
              <li class="nav-item"><a class="nav-link" href="#userLogs" data-toggle="tab">文件日志</a></li>
            </ul>
          </div><!-- /.card-header -->
          <!-- /.card -->
          <div class="card-body">
            <div class="tab-content">
              <div class="tab-pane active" id="userInfo">
              <!--个人信息-->
                <form class="form-horizontal">
                  <div class="form-group row">
                    <label for="editInputUsername" class="col-sm-2 col-form-label"><i class="fas fa-user mr-1"></i>用户名</label>
                    <div class="col-sm-10"><input type="text" disabled class="form-control" id="editInputUsername" placeholder="用户名"></div>
                  </div>
                  <div class="form-group row">
                    <label for="editInputEmail" class="col-sm-2 col-form-label"><i class="fas fa-mail-bulk mr-1"></i>邮箱</label>
                    <div class="col-sm-10"><input type="email" class="form-control" id="editInputEmail" placeholder="邮箱" disabled></div>
                  </div>
                  <div class="form-group row">
                    <label for="editInputNickname" class="col-sm-2 col-form-label"><i class="fas fa-user-circle mr-1"></i>昵称</label>
                    <div class="col-sm-10"><input type="text" class="form-control" id="editInputNickname" placeholder="昵称" disabled></div>
                  </div>
                  <div class="form-group row">
                    <label for="editInputSignature" class="col-sm-2 col-form-label" disabled><i class="fas fa-exclamation-circle mr-1"></i> 个性签名</label>
                    <div class="col-sm-10"><textarea class="form-control" disabled id="editInputSignature" placeholder="经验"></textarea></div>
                  </div>
                  <div class="form-group row">
                    <label for="editInputBirthday" class="col-sm-2 col-form-label"><i class="fas fa-birthday-cake mr-1"></i>生日</label>
                    <div class="col-sm-10"><input type="text" class="form-control" disabled id="editInputBirthday" placeholder="生日"></div>
                  </div>
                  <div class="form-group row">
                    <label for="editInputSex" class="col-sm-2 col-form-label"><i class="fas fa-venus-double mr-1"></i>性别</label>
<!--                    <input type="text" class="form-control" disabled id="editInputSex" placeholder="生日">-->
                    <div class="col-sm-2">
                      <select class="form-control col-sm-auto" disabled id="editInputSex">
                        <option name="0">女</option>
                        <option name="1">男</option>
                        <option name="2" selected>保密<option>
                      </select>
                    </div>

                  </div>
                  <div class="form-group row">
                    <div class="offset-sm-2 col-sm-10">
                      <button type="submit" class="btn btn-default" id="editUserInfoBt">编辑</button>
                      <button type="submit" class="btn btn-info" id="editUserInfoCancelBt" hidden>取消</button>
                      <button type="submit" class="btn btn-success" id="editUserInfoConfirmBt" hidden>提交</button>
                    </div>
                  </div>
                </form>
              </div>
              <!-- /.tab-pane -->
              <!-- 书签 Box -->
              <div class="tab-pane" id="userMarks">
                <!-- /.card-header -->
                  <ul class="list-group">
                    <li class="list-group-item-action" v-for="(item,index) in labels"><a href="javascript:void(0)">{{item}}</a></li>
                  </ul>
                <!-- /.card-body -->
              </div>
              <!--日志-->
              <div class="tab-pane" id="userLogs">
                <table class="table table-striped">
                  <thead>
                  <tr>
                    <th style="width: 25%">用户</th>
                    <th style="width: 25%">日期</th>
                    <th style="width: 25%">操作</th>
                    <th style="width: 25%">内容</th>
                  </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item,index) in logs">
                      <td><a href="javascript:void(0)">{{item.nickname}}</a></td>
                      <td>{{item.time}}</td>
                      <td>{{item.op}}</td>
                      <td><a href="javascript:void(0)">{{item.content}}</a></td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
          </div><!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </div><!-- /.container-fluid -->
</section>

<script src="../../js/subpages/user.js"></script>
<!-- /.content -->